<script lang="ts">
export default {
    name: 'engineerList',
};
</script>
<script setup lang="ts">
import { localStorage } from '@/utils/storage';

import {
    reactive,
    ref,
    watchEffect,
    onMounted,
    getCurrentInstance,
    toRefs,
} from 'vue';
import {
    ElTree,
    ElForm,
    ElMessageBox,
    ElMessage,
    UploadFile,
    ElTreeSelect,
} from 'element-plus';
import {
    Search,
    Refresh,
    Message,
} from '@element-plus/icons-vue';
import { ReviewListType, ReviewQuery, OptionType, DialogType } from "@/api/engineer/types"
import { getreviewList, getdict, getlabeloptions, passoption, fail } from "../../../api/engineer/index"

const queryFormRef = ref(ElForm); // 查询表单
const dataFormRef = ref(ElForm)
const state = reactive({
    loading: false,
    total: 0,
    queryParams: {
        pageNo: 1,
        pageSize: 10
    } as any,
    statusArr: [] as OptionType[],
    engineerList: [] as any,
    dialog: {
        visible: false,
    } as DialogType,
    detail: {} as any,
    optionsArr: [] as OptionType[],
})
let {
    loading,
    total,
    queryParams,
    engineerList,
    detail,
    statusArr,
    optionsArr,
    dialog
} = toRefs(state)

// 查询
const handleQuer = () => {
    loading.value = true;
    getreviewList(state.queryParams).then(({ data }) => {
        state.engineerList = data.list;
        state.total = data.total;
        state.loading = false;
    })
}


/**
 * 重置
 */
function resetQuery() {
    state.queryParams = {
        pageNo: 1,
        pageSize: 10
    }
    handleQuer();
}


// 审核通过
const handleExamine = (row: any) => {
    state.dialog = {
        title: '证件审核',
        visible: true
    }
    detail.value.engineerName = row.engineerName
    detail.value.certificateName = row.certificateName
    detail.value.labelText = row.labelText
    detail.value.remark = row.remark
    detail.value.certificateImgUrl = row.certificateImgUrl
    detail.value.certificateImg = row.certificateImg
    detail.value.id = row.id
}

const handle = (id: number) => {
    fail(id).then((res: any) => {
        if (res.code === '00000') {
            ElMessage.success("操作成功");
            state.dialog.visible = false;
            handleQuer()
        } else {
            ElMessage.error("操作失败");
        }

    })
}
onMounted(() => {
    getdict().then((res) => {
        state.statusArr = res.data

    })
    getlabeloptions().then((res) => {
        state.optionsArr = res.data
    })
    // 工程师列表
    handleQuer();

});
/**
 * 取消
 */
function closeDialog() {
    state.dialog.visible = false;
}

// 通过
function handleSubmit() {
    passoption({ id: state.detail.id, labelId: state.detail.labelText }).then((res: any) => {
        if (res.code === "00000") {
            ElMessage.success("操作成功");
            state.dialog.visible = false;
            handleQuer()
        } else {
            ElMessage.error("操作失败")
        }

    })
}

</script>
<template>
    <div class="app-container">
        <div class="search">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item prop="engineerRealname" label="名称">
                    <el-input placeholder="请输入名称进行搜索" v-model="queryParams.engineerName" clearable style="width: 200px" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select placeholder="全部" v-model="queryParams.states" clearable style="width: 200px">
                        <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleQuer" :icon="Search">搜索</el-button>
                    <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card>
            <template #header>
            </template>
            <el-table ref="dataTableRef" v-loading="loading" :data="engineerList" highlight-current-row border>
                <el-table-column label="工程师名称" align="center" prop="engineerName" width="120" />
                <el-table-column label="证件名称" align="center" prop="certificateName" width="120" />
                <el-table-column label="标签名称" align="center" prop="labelText" width="150" />
                <el-table-column label="状态" align="center" width="150">
                    <template #default="scope">
                        <el-tag v-if="scope.row.states === 1" type="info">未审核</el-tag>
                        <el-tag v-if="scope.row.states === 2" type="success">已审核</el-tag>
                        <el-tag v-if="scope.row.states === 3" type="danger">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="证件图片" align="center" width="170">
                    <template #default="scope">
                        <div v-if="scope.row.certificateImg">
                          <el-image  v-for="(item,index) in scope.row.certificateImg.split(',')" :key="index" style="width: 140px; height: 100px" :src="'https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+item" fit="scale-down"
                            :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+item]" :preview-teleported="true"
                            :http="{ headers: { 'Authorization': localStorage.get('token') } }"
                            hide-on-click-modal />
                        </div>
                        <div v-else style="width: 140px;
                          height: 100px;
                          text-align: center;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          background-color: white;">无</div>
                          </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark" width="240" />
                <el-table-column fixed="right" label="操作" align="center" width="160">
                    <template #default="scope">
                        <el-button type="success" v-if="scope.row.states == 1" link @click.stop="handleExamine(scope.row)">
                            审核通过
                        </el-button>
                        <el-button type="danger" v-if="scope.row.states == 1" link @click.stop="handle(scope.row.id)">
                            审核驳回
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- pagination -->
            <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize" @pagination="handleQuer" />
        </el-card>

    </div>
    <!-- dialog -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" @close="closeDialog">
        <el-form ref="dataFormRef" :model="detail" label-width="100px">
            <el-form-item label="工程师名称" prop="engineerName">
                <el-input v-model="detail.engineerName" placeholder="工程师名称" disabled />
            </el-form-item>



            <el-form-item label="证件名称" prop="certificateName">
                <el-input v-model="detail.certificateName" placeholder="证件名称" disabled />
            </el-form-item>

            <el-form-item label="标签名称" prop="labelText" :rules="{
                required: true,
                message: '请选择标签名称',
                trigger: 'blur',
            }">
                <el-select style="width: 200px;" v-model="detail.labelText" placeholder="标签名称">
                    <el-option v-for="item in optionsArr" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="detail.remark" placeholder="备注" disabled />
            </el-form-item>
            <el-form-item label="证件图片">
                <el-image v-for="(item,index) in detail.certificateImg.split(',')" :key="index" style="width: 140px; height: 100px" :src="'https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+item" fit="scale-down"
                    :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+item]" :preview-teleported="true" hide-on-click-modal />
            </el-form-item>



        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="closeDialog">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>


<style scoped></style>
